"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/11/3
 */
import * as React from 'react'
import {autoSize, commonStyles} from "../../assets/styles/common";
import MyText from "../../component/MyText";
import Line from "../../component/Line";
import MyIcon from "../../component/icon";

const {Actions} = require("react-native-router-flux");
import NoGroups from "../../component/NoGroups";
import {groupList, homeDynamicList} from "../../assets/data";
import Avatar from "../../component/Avatar";
import {groupStyles} from "../../assets/styles/groups";
import DynamicItem from "../../component/DynamicItem";
import {AuthPage} from "../../interface/router";
import constant from "../../utils/constant";

const {View, SectionList, TouchableOpacity, DeviceEventEmitter} = require('react-native');
const {connect} = require('react-redux');


class GroupPage extends React.Component<AuthPage, any> {


    componentDidMount(): void {
        this.props.dispatch({
            type: 'auth/fetchGroupList',
            payload: {pi: 1, ps: 5}
        });
        DeviceEventEmitter.addListener(constant.noticeKeyOfRefreshGroups, this.onRefresh)

    }

    componentWillUnmount(): void {
        DeviceEventEmitter.removeListener(constant.noticeKeyOfRefreshGroups);
    }

    onRefresh = () => {
        this.props.dispatch({
            type: 'auth/fetchGroupList',
            payload: {pi: 1, ps: 5}
        });
    };
    goToDynamicDetail = (dynamicItem) => {
        this.props.dispatch({
            type: 'post/detail',
            payload: {dynamicItem,postType:'group'}
        });

    };
    //点赞
    onPraise = (type: string, item: postItem) => {
        this.props.dispatch({
            type: 'post/praise',
            payload: {
                type,
                typeId: item.id,
                item,
                from: 'group'
            }
        })
    };

    renderSectionHeader = ({section}) => {
        const {header, data} = section;
        if (header && header.title === '我的群组') {
            return (
                <View>
                    <View style={[{height: 40, backgroundColor: '#fff', display: 'flex'}]}>
                        <View style={[commonStyles.flex1, commonStyles.listItem, {justifyContent: 'space-between'}]}>
                            <MyText>{header.title}</MyText>
                            <MyIcon name='icon-tianjia' color='#DAC229' size={autoSize(20)}
                                    onPress={Actions.allGroups}/>
                        </View>
                        <Line/>
                    </View>
                    {(!data || data.length == 0) ? <NoGroups/> : null}
                </View>
            )
        } else if (section.header.title === '近期帖子') {
            return (
                <View style={{backgroundColor: '#fff'}}>
                    <MyText color='#000' fontSize={16} style={{padding: 10}}>{section.header.title}</MyText>
                    <Line/>
                </View>
            )
        }

        return null;
    };
    renderItem = ({item, index, section}) => {
        if (section.header.title === '我的群组') {
            const group: groupItem = item;
            return (
                <TouchableOpacity key={index}
                                  style={[commonStyles.flexRow, groupStyles.listItem, {alignItems: 'center'}]}
                                  onPress={Actions.groupDetail.bind(this, {title: group.groupName, groupItem: group})}>
                    <Avatar source={{uri: group.mainPic}} circle={false}/>
                    <MyText style={{display: 'flex', flex: 1, marginLeft: 5}}>{group.groupName}</MyText>
                    <MyText color='#999'>{`${group.vipNumber} 名会员`}</MyText>
                </TouchableOpacity>
            )
        } else if (section.header.title === '近期帖子') {
            const post: postItem = item;

            return (
                <View>
                    <View key={index} style={[commonStyles.flexRow, groupStyles.listItem, {alignItems: 'center'}]}>
                        <Avatar source={{uri: post.group.mainPic}} circle={false}/>
                        <MyText style={{display: 'flex', flex: 1, marginLeft: 5}}>{post.group.groupName}</MyText>
                    </View>
                    <Line/>
                    <DynamicItem item={item}
                                 onLikePress={this.onPraise.bind(this, 'post')}
                                 onCommentPress={this.goToDynamicDetail.bind(this, item)}
                                 onContentPress={this.goToDynamicDetail.bind(this, item)}
                                 onUserInfoPress={company=>Actions.companyInfo({company})}/>
                    <Line/>
                </View>
            )
        }
        return null;
    };
    renderSectionSeparatorComponent = (item) => {
        if (item.leadingItem) {
            return <Line height={10}/>;
        }
        return null;

    };
    renderItemSeparatorComponent = (item) => {
        if (item.section.header.title === '我的群组') {
            return null;
        }
        return <Line height={2}/>;
    };

    render() {
        return (
            <View style={commonStyles.container}>
                <SectionList renderSectionHeader={this.renderSectionHeader}
                             renderItem={this.renderItem}
                             extraData={this.props}
                             SectionSeparatorComponent={this.renderSectionSeparatorComponent}
                             ItemSeparatorComponent={this.renderItemSeparatorComponent}
                             keyExtractor={(item, index) => index}
                             onRefresh={this.onRefresh}
                             refreshing={this.props.auth.loading}
                             sections={[
                                 {data: this.props.auth.myGroups, header: {title: '我的群组'}},
                                 {data: this.props.auth.groupNews, header: {title: '近期帖子'}},
                             ]}
                />
            </View>
        );
    }
}


export default connect(
    ({auth, post, group}) => ({auth, post, group})
)(GroupPage);